/**
* @Author: 李晨光
* @Date: 2019/12/16
* @Version: 1.0
* @Last Modified by: 李晨光
* @Last Modified time: 2019/12/16
**/
<comment>
  # 组件注释
</comment>
<template>
  <div id="IssueReportLedgerDetail" class="p-box">
    <div class="p-return">
      <mu-appbar color="primary" class="lan-header">
        <mu-button icon slot="left" v-close>
          <i class="iconfont angle-left iconangle-left"></i>
          <span class="lan-header-back">返回</span>
        </mu-button>
        问题上报详情
      </mu-appbar>
    </div>
    <div style="height:calc(100vh - .45rem);overflow: auto;background: #fff">
      <div  class="result ly_flex ly_flex_col ly_flex_ali_center ly_flex_just_center">
        <i class="iconfont " :class="!detail.status ? 'iconshenpi' : detail.status == 2 ? 'iconchenggong' : 'iconqingchu'"
           :style="{color: !detail.status ? '#EBEBED' : detail.status == 2 ? '#24d90c' : '#FC334E'}"></i>
        <span class="text">{{!detail.status ? '待审批' : detail.status == 2 ? '通过' : '不通过'}}</span>
      </div>
      <div class="lan-detail-list" v-if="detail.status == '1'">
        <span class="lan-detail-h">不通过原因</span>
        <span class="lan-detail-r">{{detail.approvalDesc}}</span>
      </div>
      <div class="lan-detail-list" v-if="detail.status == '2'">
        <span class="lan-detail-h">本次奖励</span>
        <span class="lan-detail-r">{{detail.score}}分</span>
      </div>

      <div class="lan-detail-list">
        <div class="lan-detail-list-box">
          <p class="lan-detail-h">审核人</p>
          <div
            class="userBox"
            v-for="(user, index) in handurl(detail.approvalUserName)" :key="index">
            <div class="ly_flex ly_flex_just_center ly_flex_ali_center add">
              {{user.substr(0,1)}}
            </div>
            <span>{{user}}</span>
          </div>
        </div>
      </div>
      <div class="lan-detail-list">
        <span class="lan-detail-h">审批时间</span>
        <span class="lan-detail-r">{{detail.approvalTime}}</span>
      </div>
      <div class="lan-detail-list">
        <span class="lan-detail-h">项目名称</span>
        <span class="lan-detail-r">{{detail.orgName}}</span>
      </div>
      <div class="lan-detail-list">
        <span class="lan-detail-h">所属区域</span>
        <span class="lan-detail-r">{{detail.areaName}}</span>
      </div>
      <div class="lan-detail-list">
        <span class="lan-detail-h">问题部位</span>
        <span class="lan-detail-r">{{detail.problemPart}}</span>
      </div>
      <div class="lan-detail-list">
        <span class="lan-detail-h">问题描述</span>
        <span class="lan-detail-r">{{detail.problemDesc}}</span>
      </div>
      <div class="lan-detail-list">
        <div class="lan-detail-list-box">
          <p class="lan-detail-h">现场照片</p>
          <div class="ly_flex ly_flex_wrap_wrap thumbnail-box ly_flex_just_between">
            <!--<img class="thumbnail" :src="list" v-for="(list,index) in handurl(detail.images)" @click="preview(list,index)"  :key="index"/>-->
            <img class="thumbnail" :src="list" v-for="(list,index) in handurl(detail.scenePhotos)"
                :preview="index" :key="index"/>
          </div>
        </div>
      </div>
      <div class="lan-detail-list">
        <span class="lan-detail-h">备注</span>
        <span class="lan-detail-r">{{detail.remark}}</span>
      </div>

      <div class="lan-detail-list">
        <div class="lan-detail-list-box">
          <p class="lan-detail-h">上报人</p>
          <div
            class="userBox"
            v-for="(user, index) in handurl(detail.reportUserName)" :key="index">
            <div class="ly_flex ly_flex_just_center ly_flex_ali_center add">
              {{user.substr(0,1)}}
            </div>
            <span>{{user}}</span>
          </div>
        </div>
      </div>
      <div class="lan-detail-list">
        <span class="lan-detail-h">上报时间</span>
        <span class="lan-detail-r">{{detail.reportTime}}</span>
      </div>
    </div>
    <ImgPreview :imgUrls="imgs" :open="imgPreview" @close="closeDialog"></ImgPreview>
    <FilePreview :fileUrl="fileUrl" :open="filePreview" @close="closeFileDialog"></FilePreview>
  </div>
</template>

<script>
  import ImgPreview from "@/preview/ImgPreview.vue"
  import FilePreview from "@/preview/FilePreview.vue"

  export default {
    name: 'IssueReportLedgerDetail',
    components: {
      ImgPreview,
      FilePreview
    },
    props: {},
    data() {
      return {
        api: {
          getIssuRepoDetailApi: '/safety/problemReport/detail' // 获取详情
        },
        type: '',
        id: '',
        detail: {},
        imgPreview: false,
        imgs: [],
        filePreview: false,
        fileUrl: '',
      }
    },
    computed: {},
    created() {
      this.type = this.$route.query.type
      this.id = this.$route.query.id
      this.getDetailData(this.id)
    },
    mounted() {
    },
    watch: {},
    methods: {
      // 获取随机测量详情
      getDetailData(id) {
        this.$openLoading()
        this.$A
          .Go("get", this.api.getIssuRepoDetailApi, {
            id: id
          })
          .then(response => {
            this.$closeLoading()
            Util.processRes(response, () => {
              this.detail = response.body;
            });
            Util.processError(this, response);
          })
          .catch(err => {
            this.$closeLoading()
            console.log(err);
          });
      },
      handurl(str) {
        if (!str) {
          return []
        } else {
          return str.split(',')
        }
      },
      preview(item, index) {
        this.imgs = [...this.handurl(this.detail.images)]
        this.imgPreview = true
      },
      filePreviewAction(list) {
        this.fileUrl = list;//this.detail.images
        this.filePreview = true
      },
      // 关闭
      openFileDialog() {
        this.filePreview = true
      },
      // 关闭
      closeFileDialog() {
        this.filePreview = false
      },
      closeDialog() {
        this.imgPreview = false
      },
      reSubmit() {
        this.$router.push({
          name: 'Observations',
          query: {
            id: this.detail.observeId
          }
        })
      },
      pass() {
        this.$router.push(
          {
            name:'IssueReportOrder',
            query: {

            }
          }
        )
      },
      refuse() {

      }
    },
    destroyed() {
    }
  }
</script>

<style lang="scss">
  #IssueReportLedgerDetail{
    .result{
      padding: 14px 0;
      i{
        font-size: .75rem;
      }
      .text{
        font-size:0.19rem;
        color:rgba(61,61,61,1);
        line-height:0.26rem;
      }
      border-bottom: 1px solid #e0e0e0;
    }
  }
</style>
